<template>
  <div class="my-cup">
    <span class="cup-no" :style="{backgroundColor:index<5?color[index]:''}">{{ index < 5 ? (index + 1) : '' }}</span>
    <div class="cup-info-head">
      <img :src="cup.img" alt=""
           class="cup-img">
    </div>
    <div class="llx">
      <div class="cup-info-head-intro">
        <h3 class="head-cup-name">{{ cup.cupName }}</h3>
        <van-divider/>
        <div class="cup-info-item">容量: {{ cup.capacity }} ml</div>
        <van-divider/>
        <div class="cup-info-item">
          {{ cup.drinkWater > 0 ? '喝了: ' + Math.floor(cup.drinkWater) + ' ml' : '没喝过...' }}
        </div>
      </div>
      <div class="cup-info"
           :style="{backgroundColor: bgColor}"
           :class="{'cup-info-active':active===1,'cup-info-passive':active===2}"
           @click="aClick(index)">
        <i class="iconfont icon-biaoqian"></i>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Cup",
  props: {
    cup: {
      type: Object
    },
    index: {
      type: Number,
      default: 0
    },
    bgColor: {
      type: String,
      default: 'rgba(188, 242, 253, 0.8)'
    }
  },
  data() {
    return {
      color: ['rgba(195,39,57,0.8)', 'rgba(209,94,229,0.8)', 'rgba(39,150,195,0.8)', 'rgba(84,227,58,0.8)', 'rgba(227,181,16,0.8)'],
      active: 0
    }
  },
  methods: {
    aClick(index) {
      /*  debug  */
      this.$emit('aClick', index);
    }
  }
}
</script>

<style lang="less">
.cup-no {
  position: relative;
  border-radius: 28%;
  height: 15px;
  width: 7px;
  font-size: 10px;
}

.my-cup {
  height: 80px;
  margin: 20px 0;
  background-color: #ffffff;
  text-align: center;
  border-radius: 20px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  box-shadow: -10px 5px 15px -5px rgba(0, 0, 0, 0.1);

  .cup-info-head {
    display: flex;

    .cup-img {
      padding: 5px;
      width: 80px;
      height: 80px;
      border-radius: 20px;
    }
  }

  .llx {
    display: flex;
    border-radius: 20px;
    background-color: #f9f9f9;

    .cup-info-head-intro {
      height: 80px;
      background-color: #ffffff;
      width: 175px;
      padding: 3px;

      .cup-info-item {
        height: 23px;
        line-height: 23px;
        vertical-align: middle;
        padding: 3px 0 3px 0;
      }

      .head-cup-name {
        height: 23px;
        line-height: 23px;
        overflow: hidden;
        padding: 3px 0 3px 0;
        font-weight: 400;
        font-size: 10px;
      }
    }

    .cup-info {
      line-height: 80px;
      vertical-align: middle;
      height: 80px;
      width: 80px;
      border-radius: 0 20px 20px 0;
      border-width: 6px;
      border-left: #2a93ea 1px dashed;
      background-color: rgba(188, 242, 253, 0.8);
      transition: all .5s linear;

      .iconfont.icon-biaoqian {
        font-size: 20px;
      }
    }

    .cup-info-active {
      animation: swing-out-left-fwd 0.2s linear both;
      background-color: rgba(248, 202, 160, 1);
    }

    .cup-info-passive {
      animation: swing-in-left-fwd 0.2s linear both;
      background-color: rgba(248, 202, 160, 0.8);
    }
  }

}

@keyframes swing-out-left-fwd {
  0% {
    transform: rotateY(0);
    transform-origin: left;
  }
  33% {
    transform: rotateY(-13deg);
    transform-origin: left;
  }
  66% {
    transform: rotateY(-26deg);
    transform-origin: left;
  }
  100% {
    transform: rotateY(-35deg);
    transform-origin: left;
  }
}

@keyframes swing-in-left-fwd {
  1000% {
    transform: rotateY(0deg);
    transform-origin: left;
  }
  66% {
    transform: rotateY(-13deg);
    transform-origin: left;
  }
  33% {
    transform: rotateY(-26deg);
    transform-origin: left;
  }
  0% {
    transform: rotateY(-35deg);
    transform-origin: left;
  }
}


.van-divider {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 0.37333rem;
  line-height: 0.64rem;
  border-style: dashed;
  border-width: 0;

  color: #4298e7;
  border-color: #2a93ea;
  padding: 0 16px 0 0;
  margin: 0;
}

</style>